<template>
	<view class="content">
		<!-- F1：停车区分布图 -->
		<!-- longitude：地图中心点的经度 -->
		<!-- latitude：地图中心点的纬度 -->
		<!-- scale：地图的缩放级别   -->
		<!-- @tap：地图被轻拍 -->
		<!-- @markertap：地图上的某个标记物被轻拍 -->
		<!-- @callouttop：地图上的某个气泡窗口被轻拍 -->
		<!-- 提示：Vue.js中的样式绑定 :style="obj" -->
		<map :style="{height: mapHeight+'px'}" id="parkingMap" class="parking-map" :longitude="116.420234" :latitude="40.063220" :scale="15" :markers="parkingMarkers" @markertap="doMarkerTap"></map>
		<!-- F2：各停车区空闲车位统计图 -->
		<view class="f2">
			<!-- 秋云图表组件默认撑满父元素，可通过控制父元素的尺寸来控制图表的尺寸 -->
			<!-- type：图表的类型，例如：柱状图、折线图、雷达图... -->
			<!-- opts：图表的配置选项（Options） -->
			<!-- chartData：图表的数据 -->
			<qiun-data-charts type="column"	:opts="chartsOptions"	:chartData="chartsData"/>
		</view>
	</view>
</template>

<script>
import { parkingZoneList } from '@/service'	
	export default {
		data() {
			return {
				parkingZones:[], //停车区列表
				parkingMarkers: [], 	//地图上所有停车区对应的标记物列表
				chartsOptions: {color: ['#090']},		//秋云柱状图的配置选项，指定柱状条的颜色
				chartsData: {},											//秋云柱状图的数据
				mapHeight: 300,	//地图的高度，单位是px，方便与屏幕高度进行运算
			}
		},
		async onLoad(){
			//1.异步请求服务器端接口数据，获取停车区列表
			this.parkingZones = await parkingZoneList()
			//2.把停车区数组 映射为 地图标记物数组
			this.parkingMarkers = this.parkingZones.map((z,i)=>{
				return {		
					id: i,				//标记物的编号
					longitude: z.longitude,	//标记物在地图上的经度
					latitude: z.latitude,		//标记物在地图上的纬度
					iconPath: '/static/img/loc.png',	//标记物所在处的图标
					//title: z.zname,				//标记物上方的标题(不能定制样式)
					callout: {							//标记物上方的气泡窗口
						content: z.zname+':'+z.unoccupied,		//气泡窗口的内容
						fontSize: 12,
						display: 'BYCLICK',										//气泡窗口点击后显示
					}
				}
			})
			//3.把停车区数组 映射为 秋云图表必需的数据
			this.chartsData = {
				//分类/类目，指X轴上可能出现的坐标名称
				// categories: ['一区', '二区', '三区', '四区', '五区','六区'],
				categories: this.parkingZones.map(z=>z.zname.substr(-2)),		//只截取最后两个字符
				//系列，指多少个要显示的数据系列
				series: [
					{
						name: '各停车区空闲车位数',
						// data: [100, 200, 300, 400, 500, 600]
						data: this.parkingZones.map(z=>z.unoccupied)
					}
				],
			}
			//4.获取屏幕高度，进而计算出地图应该呈现出的高度
			// let info = uni.getSystemInfoSync()			//同步调用：获取系统信息
			//地图高度 = 窗口高度 - 统计图高度 - 中间留白
			// this.mapHeight = info.windowHeight - 320 - 30
			uni.getSystemInfo({												//异步调用：获取系统信息
				// success(info){		//等价于success: function(){
				success: (info)=>{	//注意：此处必须使用箭头函数，以保留this的指向
					// console.log(info)
					//地图高度 = 窗口高度 - 统计图高度 - 中间留白
					this.mapHeight = info.windowHeight - 320 -30
				}
			})    
		},
		methods: {
			//处理地图上的标记物“被轻拍”事件
			doMarkerTap(e){
				//console.log(e)//{detail: {markerId, longtitude, latitude}}
				//查找到“地图上下文对象”
				let mapCtx = uni.createMapContext('parkingMap',this)
				//使用地图上下文对象把地图的中心点转移到当前点击的标记物上
				mapCtx.moveToLocation({
					longitude: e.detail.longitude,
					latitude: e.detail.latitude
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.parking-map {
	width: 750rpx;//宽度 - 提示：地图的尺寸不要使用 % (有兼容性问题)
	//height: 600rpx;//高度
	//flex:1; //尺寸的增长权重为1- 提示：对map无效
}

.f2 {
	width: 750rpx;//宽度
	height: 320px;//高度  - 注意：此处没有使用rpx，而用了px，方便与屏幕高度进行运算
	margin-top: 30px;
}
</style>
